<template>
    <div id="QuestionsView">
        <h2>题目列表</h2>
    <a-form :model="searchParams" layout="inline">
      <a-form-item field="title" label="名称">
        <a-input v-model="searchParams.title" placeholder="请输入题目名称" style="min-width: 240px;" />
      </a-form-item>
      <a-form-item field="tags" label="标签">
        <a-input-tag v-model="searchParams.tags" placeholder="请输入题目标签"  style="min-width: 280px;"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doQueryQuestion">查询</a-button>
      </a-form-item>
     </a-form>

     <a-divider size="0" />

        <a-table :columns="columns" 
        :data="dataList"
        :pagination="{pageSize:searchParams.pageSize,
            current:searchParams.current,
            total,
            showTotal:true, 
            }"
        @page-change="onPageChange"
        >
        <template #tags="{ record }">
          <a-space wrap>
            <a-tag v-for="(tag, index) of record.tags" :key="index" color="green" >{{ tag }}</a-tag>
          </a-space>
        </template>

        <template #acceptedRate="{ record }">
          {{ record.submitNum? record.acceptedNum /record.submitNum : "0" }}%
          ( {{ record.acceptedNum }} /
           {{ record.submitNum }} )

        <!--{{ '${record.submitNum? record.acceptedNum / record.submitNum : "0"}(${record.acceptedNum}/${record.submitNum})' }}--> 
        </template>

        <template #createTime="{ record }">
          {{ moment(record.createTime).format('YYYY-MM-DD') }}
        </template>
        <template #optional="{ record }">
            <a-space>
              <a-button type="primary"  @click="toQuestionPage(record)">查看题目</a-button>
            </a-space>
        </template>
        </a-table>
    </div>
</template>

<script setup lang="ts">
import message from '@arco-design/web-vue/es/message';
import { Question, QuestionControllerService, QuestionQueryRequest } from '../../../generated';
import { onMounted, ref, watchEffect } from 'vue';
import * as querystring from "querystring";
import { useRouter } from 'vue-router';
import moment from 'moment';

  const show = ref(true)

  const dataList=ref([]);
  const total=ref(0);
  const searchParams=ref<QuestionQueryRequest>({
     title:"",
     tags:[],
     pageSize:9,
     current:1,
  });

  const loadData=async()=>{
    const res=await QuestionControllerService.listQuestionVoByPageUsingPost(searchParams.value);
    console.log(res.data);
    if(res.code === 0){
      dataList.value=res.data.records;
      total.value=res.data.total;
    }
  }

  const onPageChange=(page:number)=>{
     searchParams.value={
       ...searchParams.value,
       current:page,
     };   
  }

  watchEffect(()=>{
    loadData();
  })
  
  onMounted(()=>{
    loadData();
  });

  const columns = [{
    title: '题号',
    dataIndex: 'id',
  }, {
    title: '题目名称',
    dataIndex: 'title',
  }, {
    title: '标签',
    slotName: 'tags',
  },{
    title: '通过率',
    slotName:"acceptedRate",
  },
 {
    title: '创建时间',
    slotName: 'createTime',
  },{
      slotName: 'optional'
  }
];

const router = useRouter();
const toQuestionPage = (question:Question)=>{
  router.push({
       path:'/view/question/'+ question.id,
       
    });
};

const doQueryQuestion = ()=>{
  searchParams.value={
    ...searchParams.value,
    current:1,
  };
};

</script>

<style scoped>
 #QuestionsView {
  max-width:1600px;
  margin: 0 auto;
}
</style>